<template>
    <div class="menu">
        <label v-for="item in list" :key="item.path" @click="handleJump(item)" :class="{'active': $route.path == item.path}">{{item.meta.label}}</label>
    </div>
</template>
<script setup>
import {defineProps, reactive, defineEmits} from 'vue'
const prop = defineProps({
    menuList: []
})
const emit = defineEmits(['handleJump'])
const list = reactive(prop.menuList)
const handleJump = (item) => {
    emit('handleJump', item)
}
</script>
<style scoped>
.menu{
    display: flex;
    flex-direction: column;
    padding: 20px;
    /* border-right: 2px solid #dedede; */
}
.menu label{
    opacity: .5;
    cursor: pointer;
    padding: 8px;
}
.menu .active{
    color: rgb(0, 145, 255);
    opacity: 1;
}
</style>